<template>
  <div>
    <div class="top">
      <span style="margin: 0 20px;transition: 700ms;" @click="$router.replace({ path: '/' })"
        :style="name == 'home' ? 'display:inline-block; color:#938bf9;font-weight:800;transform:scale(1.4)' : 'cursor:pointer'">叫号</span>
      <span style="margin: 0 20px;transition: 700ms;" @click="$router.replace({ path: '/addnum' })"
        :style="name == 'addnum' ? 'display:inline-block;color:#938bf9;font-weight:800;transform:scale(1.4)' : 'cursor:pointer'">排号</span>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import store from './store/index'
export default {
  mixins: [store],
  data() {
    return {
      name: ''
    }
  },
  watch: {
    '$route.path': {
      immediate: true,
      handler: function () {
        setTimeout(() => {
          this.name = this.$route.name
        })
      }
    }
  },
  mounted() {
    this.setallnums()
  }
}
</script>

<style scoped>
.top {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 10px 0 #ccc;
  background-color: #d4eafd;
  text-align: center;
  z-index: 2;
}
</style>